
<template>
	<div id="addMoney">
		<div class="addMoney">
      <!-- <el-steps :space="300" :active="currentNavtab" align-center finish-status="success">
        <el-step title="子商户基本信息"></el-step>
        <el-step title="资质图片上传"></el-step>
        <el-step title="设置费率"></el-step>
        <el-step title="微信、支付宝、合利宝签约"></el-step>
      </el-steps> -->
			<div class="step">
				<div :class="['level', currentNavtab >= 1 ? 'active' : '']" >
					<div class="biao">1</div>
					<div class="txt">子商户基本信息</div>
          <div class="xian"></div>
				</div>
				<div :class="['level', currentNavtab >= 2 ? 'active' : '']">
					<div class="biao">2</div>
					<div class="txt">资质图片上传</div>
          <div class="xian"></div>
				</div>
				<div :class="['level', currentNavtab >= 3 ? 'active' : '']">
					<div class="biao">3</div>
					<div class="txt">设置费率</div>
          <div class="xian"></div>
				</div>
				<div :class="['level', currentNavtab >= 4 ? 'active' : '']">
					<div class="biao">4</div>
					<div class="txt">微信、支付宝、合利宝签约</div>
				</div>
			</div>
			<div class="main">
        <keep-alive>
          <first-money v-if="currentNavtab == 1 && !ispopup" @firstSuccess="_handleFirst" :oneEditData='oneEditData' :orType='orType' ref="firstMoney"/>
          <two-money  
            ref="twoMoney" 
            @twoSuccess="_handleFirst"  
            v-if="currentNavtab == 2 && isTwo && !ispopup" 
            :firstData="firstData" 
            :twoEditData='twoEditData' 
            :comeType='comeType' 
            :firstStpot='firstStpot'/>
        </keep-alive>
          <three-money ref="threeMoney" @threeSuccess="_handleFirst" v-if="currentNavtab == 3 && !ispopup" :merchantNo="merchantNo" :orType='orType' :status='status'/>
          <fourth-money v-if="currentNavtab == 4 && !ispopup" :merchantNo='merchantNo'/>

          <div v-if="ispopup">
            <div class="success" v-if="status == 'AUDITED'">
              <div class="top_box">
                <img src="@/static/icon-cg.svg" alt="">
                <p class="p-1">{{successText}}</p>
                <p class="p-2">{{twoSuccessText}}</p>
              </div>
              <div class="btn_box">
                <el-button @click="handleCancel">稍后上传</el-button>
                <el-button @click="succecPrve" type="primary">下一步</el-button>
              </div>
            </div>
            <div class="failure" v-if="status == 'OVERRULE'">
              <div class="top_box">
                <img src="@/static/icon-sb.svg" alt="">
                <p class="p-1">提交失败</p>
                <p class="p-2">请核对并修改以下信息后，再重新提交。</p>
              </div>
              <div class="con_box">
                <div class="list">
                  <i class="el-icon-error" style="color:red;margin-right:10px"></i>
                  <span>{{failureMsg}}  </span>
                </div>
              </div>
              <div class="btn_box">
                <el-button @click="handleCancel">稍后重试</el-button>
                <el-button @click="againSubmit" type="primary">重新提交</el-button>
              </div>
            </div>
            <div class="success" v-if="status == 'INIT'">
              <div class="top_box">
                <img src="@/static/icon-dd.svg" alt="">
                <p class="p-1">正在等待合利宝审核</p>
                <p class="p-2">建议20～30分钟后重新获取结果</p>
              </div>
              <div class="btn_box">
                <el-button @click="handleBack">返回</el-button>
                <el-button type="primary" @click="getResults">获取结果</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="btn" v-if="!ispopup">
          <el-button @click="handleCancel" type="primary" v-if="currentNavtab == 1 || currentNavtab== 3">取消</el-button>
          <el-button @click="prev" type="primary" v-if="currentNavtab == 2 && stp == 2">上一步</el-button>
          <el-button @click="next" type="primary" v-if="currentNavtab == 1 || currentNavtab == 2 || currentNavtab == 3">下一步</el-button>
        </div>
		</div>
	</div>
  
</template>
<script>
// components
import FirstMoney from './components/firstMoney'
import TwoMoney from './components/twoMoney'
import ThreeMoney from './components/threeMoney'
import FourthMoney from './components/fourthMoney'
// api
import {
 addHlb,
 getOneResults,
 addOpenProduct,
 getqueryStpeStatus,
 getqueryStatus,
 getCredential,
 editImgArr,
 geteditDetail,
} from '@/api/moneyManagement'


export default {
  name: 'NewIncreaseVerify',
  components: {
		FirstMoney,
		TwoMoney,
		ThreeMoney,
		FourthMoney
  },
  // mixins: [handlePageMixin],
  data() {
    return {
      Loading: false,
			options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' },
        { label: '选项4', value: '4' }
      ],
			type:[
				{id: 0, value: '全部'},
				{id: 1, value: '等待创建'},
				{id: 2, value: '创建失败'},
				{id: 3, value: '创建成功'},
			],
			currentNavtab: 1,
      stp: 2,//
      stpNum: 1,
			isPrev: false,
			isNext: true,
      status: '',
      firstData: {},
      twoData:{},
      threeData:{},
      settleBankType: '',//转给第二步，是否显示结算人的照片
      isTwo: true,
      id: '',//子账号ID
      msg: '',
      threeRes:{},//费率提交成功返回数据
      ispopup: false, 
      successText: '子商户资质信息已审核成功',//子商户资质信息已审核成功,子商户费率已审核成功
      twoSuccessText: '可设置商户费率',//可设置商户费率 ,请尽快告知商户进行绑定支付宝和微信支付
      failureMsg: '',
      fundId: '',
      orderNo: '',
      merchantNo: '',
      oneEditData: {},
      twoEditData: {},
      comeType: 'add',//编辑进入第二步，还是新建
      firstStpot: '',

    }
  },
  created() {
    var fundId= this.$route.query.fundId
    var orType = this.$route.query.type
    this.orderNo = this.$route.query.orderNo
    this.orType = orType
    this.merchantNo = this.$route.query.merchantNo
    if(orType == 'add'){
      this.comeType = 'add'
    }else if(orType == 'edit'){
      this.getSteps(fundId)
    }
    
	},
  methods: {
    //点击查看进来获取步骤
    getSteps(fundId){
      const params = {
        fundId: fundId
      }
      getqueryStpeStatus(params).then(res => {
        const { stp,status,msg} = res.result
        if(stp == 1){
          this.currentNavtab = 1
          this.stpNum = 1
          this.firstStpot = stp
          this.successText = '子商户资质信息已审核成功'
          this.twoSuccessText = '可设置商户费率'
        }else if(stp == 2){
          this.currentNavtab = 2
          this.stpNum = 2
          this.firstStpot = stp
          this.successText = '子商户资质信息已审核成功'
          this.twoSuccessText = '可设置商户费率'
          this.comeType = 'edit'
        }
        else if(stp == 3){
          this.currentNavtab = 3
          this.stpNum = 3
          this.successText = '子商户费率已审核成功'
          this.twoSuccessText = '请尽快告知商户进行绑定支付宝和微信支付'
        }
        else if(stp == 4){
          this.currentNavtab = 4
          this.stpNum = 4
        }
        if(status == 1){
          this.ispopup = true
          this.status = 'INIT' 
        }else if(status == 2){
          this.ispopup = true
          this.status = 'OVERRULE'
          this.failureMsg = msg 
        }else if(status == 3){
          this.ispopup = true
          this.status = 'AUDITED'
        }else{
          this.status = ''
        }
      }).finally(() => {
        this.loading = false
      })
      
    },
    //第三步提交，查询结果
    getqueryStatus(){
      const merchantNo = this.merchantNo
      getqueryStatus(merchantNo).then(res => {
        const { status ,msg} = res.result
        this.currentNavtab = 3
        if(status == 1){
            this.ispopup = true
            this.status = 'INIT' 
            
        }else if(status == 2){
            this.ispopup = true
            this.status = 'OVERRULE'
            this.failureMsg = msg
        }else if(status == 3){
            this.ispopup = true
            this.status = 'AUDITED'
            this.successText = '子商户费率已审核成功'
            this.twoSuccessText = '请尽快告知商户进行绑定支付宝和微信支付'
        }
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleCancel(){
      this.$router.go(-1)
      
    },
    //上传成功的下一步
    succecPrve(){
      this.currentNavtab = parseInt(this.stpNum)+1
      this.ispopup = false
    },
    //上传失败-重新提交
    againSubmit(){
      var currentNavtab = this.currentNavtab
      if(currentNavtab == 1){
         
          var orderNo = this.orderNo
          geteditDetail(orderNo).then(res => {
            this.oneEditData = res.result
          })
          .finally(() => {
            this.loading = false
          })
          setTimeout(() => {
          this.currentNavtab = 1
          this.$nextTick(()=> {
            this.ispopup = false
          })
        }, 1000);
      }else if(currentNavtab == 2){
        
        var orderNo = this.orderNo
        getCredential(orderNo).then(res => {
          this.twoEditData = res.result
        })
        .finally(() => {
          this.loading = false
        })
        setTimeout(() => {
          this.currentNavtab = 2
          this.$nextTick(()=> {
            this.ispopup = false
          })
        }, 1000);
      }else if(currentNavtab == 3){
          this.currentNavtab = 3
         
          this.ispopup = false
      }
     
    },
    //等待审核-获取结果
    getResults(){
      var currentNavtab = this.currentNavtab
      console.log('currentNavtab',currentNavtab)
      if(currentNavtab == 1){
        this.getOneResults(1)
        this.stpNum = 1
      }else if(currentNavtab == 2){
        this.getOneResults(2)
        this.stpNum = 2
      }else if(currentNavtab == 3){
        var id = this.fundId
        this.getqueryStatus()
        this.stpNum = 3
      }
      
      
    },
    //等待审核放回
    handleBack(){
      console.log('1111111')
      this.$router.push({
        path: '/moneyManagement/money-list', 
      })
    },
    //第一，二步提交，查询结果
    getOneResults(num){
      const params = {
        orderNo: this.orderNo
      }
      getOneResults(params).then(res => {
        const { status,stp} = res.result
        this.currentNavtab = num
        this.stp == 0
        this.stpNum = stp
        if(status == 3){
            this.ispopup = true
            this.status = 'AUDITED' 
            this.successText = '子商户资质信息已审核成功'
            this.twoSuccessText = '可设置商户费率'
        }else if(status == 1){
            this.ispopup = true
            this.status = 'INIT'
        }else if(status == 2){
            this.ispopup = true
            this.status = 'OVERRULE'
        }
        })
        .finally(() => {
          this.loading = false
        })
    },
    //下一步
		next() {
      var Navtab = this.currentNavtab
      if(Navtab == 1){
        this.$refs.firstMoney.submitForm('ruleForm')
        this.isTwo = false;
        this.$nextTick(()=> {
          this.isTwo = true;
        })
      }else if(Navtab == 2){

          this.$refs.twoMoney.submitForm('ruleForm')
        
      }else if(Navtab == 3){
        this.$refs.threeMoney.submitForm('ruleForm')
      }
			
		},
    //数据回显
    
    handleNext(){
      if(this.currentNavtab >= 5) {
				this.isNext = false;
				return
			}else{
				this.isPrev = true;
			}
    },
		prev(){
			this.currentNavtab --
			if(this.currentNavtab == 1 || this.currentNavtab == 3) {
				this.isPrev = false;
				return
			}else{
				this.isNext = true;
			}
		},
    _handleFirst(data,type){
      console.log('data',data,'type',type)
      if(type == 'first'){
          this.firstData = data
          this.currentNavtab = 2
      }else if(type == 'two'){
          this.twoData = data
          console.log("this.firstData",this.firstData)
          console.log("this.twoData",this.twoData)
          if(this.orType == 'add'){
            var params = {
              credential: {
                ...this.twoData
              },
              ...this.firstData,
            }
            this.addHlb(params)
          }else if(this.orType == 'edit'){
            if(this.firstStpot == 1){
              var params = {
                credential: {
                  ...this.twoData
                },
                ...this.firstData,
              }
              this.addHlb(params)
            }else if(this.firstStpot == 2){
              var params = {
                orderNo: this.orderNo,
                merchantNo: this.merchantNo,
                credential: {
                  ...this.twoData
                },
              }
              this.editImg(params)
              }
            
          }
          
      }else if(type == 'three'){
        this.threeData = data
        var params = {
            ...this.threeData,
          }
          console.log('three',data)
        this.addOpenProduct(data)
      }
      
      this.handleNext()
     
    },
    //第一，二步提交
    addHlb(params){
      console.log('params',params)
      addHlb(params).then(res => {
        const {status,fundId,orderNo,merchantNo} = res.result 
        this.ispopup = true
        if(res.code == 200){
          this.status = 'INIT' 
        }else{
          this.status = 'OVERRULE'
        }
        this.fundId = fundId
        this.orderNo = orderNo
        this.merchantNo = merchantNo
        this.handleSuccess('提交成功') 
      }).finally(() => {
        this.loading = false
      })
    },
    editImg(params){
      console.log('params',params)
      editImgArr(params).then(res => {
        const {status} = res.result 
        this.ispopup = true
        if(res.code == 200){
          this.status = 'INIT' 
        }else{
          this.status = 'OVERRULE'
        }
        this.handleSuccess('提交成功') 
      }).finally(() => {
        this.loading = false
      })
    },
    //第三步提交
    addOpenProduct(params){
      console.log('params',params)
      addOpenProduct(params).then(res => {
       
       if(res.code == 200){
         this.ispopup = true
         this.status = 'INIT'
       }else{
         this.ispopup = true
         this.status = 'OVERRULE'
       }
        this.handleSuccess('提交成功') 
      }).finally(() => {
        this.loading = false
      })
    },
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
      })
    },
  }
}
</script>
<style lang="scss" scoped>
@import './style/moneyList';
.time ::v-deep .el-input{
	width: 200px;
}
.el-select .el-input {
    width: 130px;
}
.first_box{
	::v-deep :nth-child(1).el-input__inner{
		width: 100px;
	}
	::v-deep :nth-child(2).el-input__inner{
		width: 200px;
	}
} 
.input-with-select .el-input-group__prepend {
	background-color: #fff;
}

</style>